<!-- 自定义表单 -->
<template>
	<view class="my-form" :style="{'--color': color,'--colors':colors}">
		<view v-for='(form,index_f) in orderData' :key='index_f' v-if='orderData.length > 0'>
			<!-- 表单详情介绍 -->
			<view class="orderInfo" v-if='form.info && showInfo=="true"'>
				<view class="topMsg" v-if='form.info.show_info == 1'>
					<image v-if='form.info.wzn_act_img' :src="$imgUrls(form.info.wzn_act_img)" mode="widthFix"></image>
					<view class="infoContent">
						<view class="infoName">{{form.info.order_name}}</view>
						<view class="info_item">{{form.info.order_title}}时间：{{form.info.order_starttime}} ~
							{{form.info.order_endtime}}
						</view>
						<view class="info_item">联系电话：{{form.info.order_tel}}</view>
						<view class="info_item">地址：{{form.info.order_address}}</view>
						<!-- <view class="info_s">{{form.info.order_title}}说明：</view> -->
					</view>
				</view>
				<mp-html :content="form.info.order_content" lazy-load scroll-table selectable use-anchor
					show-with-animation />
			</view>
			<view class="dowload_file_box flex-box align-center" v-if='form.info.attachment_url'>
				<view class="dowload_file" @click="openFile(form.info.attachment_url)">
					<text class="thmeBg" :style="{
						'--color': color
					}">预览{{form.info.attachment_name}}</text>
				</view>
				<view class="dowload_file" @click="copy_text(baseUrl + form.info.attachment_url)">
					<text class="thmeBg" :style="{
						'--color': color
					}">复制附件地址</text>
				</view>
			</view>
			<view class="photoes" v-if='form.info.imgs'>
				<template v-if="form.info.imgs.length == 1">
					<image class="img_1" @click="previewImage(g,form.info.imgs)" :src="$imgUrls(img)" mode="aspectFill"
						:show-menu-by-longpress='true' v-for="(img,g) in form.info.imgs" :key='g' v-if='g == 0'></image>
				</template>
				<template v-else>
					<image class="img_2" @click="previewImage(g,form.info.imgs)" :src="$imgUrls(img)" mode="aspectFill"
						:show-menu-by-longpress='true' v-for="(img,g) in form.info.imgs" :key='g'></image>
				</template>
			</view>
			<!-- 表单-->
			<view class="reserve-box">
				<view class='reserve white'>
					<view class='reserve-title'>{{form.info.order_name}}</view>
					<view class="form">
						<block v-for='(ord,index) in form.data' :key='index'>
							<!-- 1、单行文本框 -->
							<view class='text_input align-center' v-if='ord.config_type == 1 && ord.config_state == 1'>
								<text class='Required'
									v-if='ord.config_must == 1||ord.config_name =="用户姓名"||ord.config_name =="联系电话"'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<input :placeholder='ord.place?ord.place:"请输入"+ord.config_name'
									v-model="ord.config_content" class='form-ipt' type='text'
									placeholder-class="pla"></input>
							</view>
							<!--2、选择日期  3-->
							<view class='drop_select' v-if='ord.config_type == 3 && ord.config_state == 1'>
								<timepicker showType="date" @btnConfirm="btnConfirm1" :isAll="false" :index1='index'
									:index2='index_f' @btnCancel="btnCancel">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex"
											:class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:ord.config_pla }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>

							<!-- 3、验证码 -->
							<view class='Veri_Code align-center'
								v-if='form.info.verification == 1 && ord.config_name == "联系电话"'>
								<view class="inputBox flex-box text_input ">
									<text class='Required'>*</text>
									<input placeholder='请输入验证码：' type='number' v-model="form.info.verCode"></input>
								</view>
								<button class='sendCode thmeBg' :style="{'--color': color}"
									@click='verifCode2(index_f,form.info.order_id)'
									:disabled="form.info.btnDisabled">{{form.info.btnTxt}}</button>
							</view>
							<!-- 4、 选择时间-->
							<view class='drop_select' v-if='ord.config_type == 7 && ord.config_state == 1'>
								<timepicker showType="minuteToSecond" @btnConfirm="btnConfirm" :isAll="false"
									:index1='index' :index2='index_f' id='mypicker' @btnCancel="btnCancel"
									ref='mypicker'>
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex"
											:class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:time }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>
							<!-- 5、选择地址 -->
							<view class='drop_select' v-if='ord.config_type == 6 && ord.config_state == 1'>
								<view class="picker" @click="showAddPicker(index,index_f)">
									<text class='Required' v-if='ord.config_must == 1'>*</text>
									<text class="isKey">{{ord.config_name}}：</text>
									<text class="flex"
										:class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:ord.pickered }}</text>
									<text class="icon-xiasanjiaoxing iconfont"></text>
								</view>
							</view>
							<!-- 6、下拉框 -->
							<view class='drop_select' v-if='ord.config_type == 2 && ord.config_state == 1'
								@click="showSelect(index,index_f)">
								<picker mode="selector" :range='ord.options' :data-indexf='index_f' :data-index='index'
									@change="selectorChange" style="width: 100%;">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex"
											:class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:'请选择'+ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</picker>
							</view>
							<!-- 7、复选框 -->
							<view class='mulitSelect' v-if='ord.config_type == 5 && ord.config_state == 1'>
								<view>
									<text class='Required' v-if='ord.config_must == 1'>*</text>
									<text class="isKey">{{ord.config_name}}：</text>
								</view>
								<view class="checkList flex">
									<block v-for="(check,index_check) in ord.checkList" :key='index_check'>
										<view class="checkItem"
											@click="checkClick(index,index_f,index_check,check.checked,check.name)">
											<view class="checkIcon thmeBorder" :style="{'--color': color}"
												:class="{thmeBg:check.checked}">
												<text class="icon-xuanzhong iconfont"></text>
											</view>
											<text class="name">{{check.name}}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 8、单选框 -->
							<view class='singleSelect' v-if='ord.config_type == 9 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<view class="checkList flex">
									<block v-for="(check,index_check) in ord.checkList" :key='index_check'>
										<view class="checkItem" @click="checkClick1(index,index_f,index_check,check)">
											<view class="checkIcon_" :class="{thmeBorder:ord.config_content == check}"
												:style="{'--color': color}">
												<text :class="ord.config_content == check?'thmeBg':'grayBg'"
													:style="{'--color': color}"></text>
											</view>
											<text class="name">{{check}}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 9、上传图片 -->
							<view class="uploadImg" v-if='ord.config_type == 8 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<view class="phone-box flex-box">
									<view class="upBox relative" v-for="(img,i) in ord.imgs" :key='i'>
										<view class="delImg thmeBg" @click="del(index,index_f,i)">
											<image :src="staticUrl+'/images/jh_up/delImg.png'"></image>
										</view>
										<image class="upIcon" :src="$imgUrls(img)" mode="aspectFit"></image>
									</view>
									<view class="upBox" v-if="ord.imgEn" @click="selectImage(index,index_f,ord.limit)">
										<image class="upIcon" :src="staticUrl+'/images/jh_up/addImg.png'"
											 mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<!-- 10、文本域 -->
							<view class='areaBox color' v-if='ord.config_type == 4 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<textarea class="textArea" v-model="ord.config_content"
									@input="areaBlur($event,index,index_f)"
									:placeholder="ord.plac?ord.plac:'请输入内容...'" />
							</view>

							<!-- 11、 选择时间 (可配置类型)-->
							<view class='drop_select' v-if='ord.config_type == 10 && ord.config_state == 1'>
								<timepicker :showType="ord.dateTimeType" @btnConfirm="btnConfirm2" :isAll="false"
									:index1='index' :index2='index_f' id='mypicker' @btnCancel="btnCancel"
									ref='mypicker' style="width: 100%;height: 100%;">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex"
											:class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:'请选择'+ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>
						</block>
						<!-- <text class="wrong">{{form.info.wrongTxt}}</text> -->
						<button class='reserveNow' form-type='submit'
							v-if='form.info.order_id == "2147" && (form.station == 0 || !form.station)'>暂无{{form.info.order_title?form.info.order_title:'申请'}}权限</button>
						<button class='reserveNow thmeBg' v-if="form.info.price == 0" :style="{'--color': color}"
							form-type='submit'
							@click="reserveNow(index_f,form.info.order_id)">{{form.info.order_title?'立即'+form.info.order_title:'立即提交'}}</button>
						<view class="row j-sb nowBtn bgcolor" v-if="form.info.price != 0"
							@click="reserveNow(index_f,form.info.order_id)">
							<view class="d-flex white a-center j-centert bgcolors nowLeft">
								<text class="h6">￥</text>
								<text class="size32">{{form.info.price}}</text>
							</view>
							<view class="d-flex white size32 a-center j-centert bgcolor nowRigth">
								{{form.info.order_title?'立即'+form.info.order_title:'立即提交'}}
							</view>
						</view>
					</view>
					<view class="color_66 text-center m-top20" @click="toRecord">我的预约</view>
				</view>
			</view>
		</view>
		<view class="mask success-img-box" v-if='showSuccess'
			:style="{'padding-top':navHeight+System.statusBarHeight+'px'}">
			<image @click="toStation" class="success-img" :src="staticUrl+'/images/station/be_station.png'"
				mode="widthFix"></image>
		</view>
		<!-- 选择地址组件（不能放在循环里面） -->
		<mpvue-city-picker :shixian2='shixian2' ref="mpvueCityPicker_" :pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm" @onCancel='onCancel'></mpvue-city-picker>

		<!-- <showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel> -->
		<empty v-if='noData' type='1' cat='4' :msg='msg'></empty>
		<!-- 	<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
		 @certain='toUrl("/pages/reserve/myRreserve")' :btn1='btn1' :btn2='btn2'></showModel> -->
		<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
			@certain='certainBtn' :btn1='btn1' :btn2='btn2'></showModel>
		<view class="mask flexac f-column" @click="success_img = ''" v-if="success_img">
			<image class="viewbox5" :src="$imgUrls(success_img)" mode="aspectFit" style="height: 890rpx;" @click.stop>
			</image>
			<text class="iconfont icon-guanbi size60" @click="success_img = ''"></text>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	var date = new Date(),
		that, timer = null;
	var mon = date.getMonth() + 1;
	if (mon < 10)
		mon = "0" + mon
	var day = date.getDate();
	if (day < 10)
		day = "0" + day
	var today = date.getFullYear() + "-" + mon + "-" + day;
	var H = date.getHours()
	var m = date.getMinutes()
	if (H < 10)
		H = '0' + H
	if (m < 10)
		m = '0' + m
	var time = H + ':' + m; // 当前时间
	import mpvueCityPicker from './mpvue-citypicker/mpvueCityPicker.vue'
	import timepicker from "./time-picker.vue"
	import '@/js_sdk/ican_H5Api/ican-H5Api'
	export default {
		props: ['ids', 'info', 'barTitle'], //ids:表单id列表,有可能同时出现多个表单的情况  info:是否显示表单介绍  barTitle:是否修改页面标题 1修改
		components: {
			mpvueCityPicker,
			timepicker,
		},
		data() {
			return {
				colors: getApp().globalData.color_aid,

				staticUrl: this.staticUrl,
				baseUrl: this.baseUrl,
				showModal: false,
				latitude: 0, //纬度
				longitude: 0, //经度
				inputValue: today,
				shixian: false,
				year: date.getFullYear(),
				month: mon,
				day: day,
				indexs: [],
				today: today, // 出生日期默认值	
				orderData: [], // 表单结构
				time: time, // 当前时间 
				minute: 3,
				hour: 3,
				shixian1: false,
				cityPickerValueDefault: [0, 0, 1], // 默认选择地址
				shixian2: false,
				loadingNow: false, // 图片正在上传
				list: this.ids,
				showInfo: this.info, // 是否显示表单详情
				noData: false,
				msg: '',
				showSuccess: false,
				success_img: '',
				showModal1: false,
				modelTitle: '您已成功提交，请耐心等待审核结果！',
				btn1: '确定',
				btn2: '前往查看',
				jump_pay: '',
				sncode_id: '',
				palyInfo: {} // 获取支付信息
			}
		},
		created() {
			let that = this;
			that.getList();

		},
		methods: {
			toRecord() {
				if (!this.vid) return this.toUrl('/userPage/login/binding'); 
				this.toUrl('/pages/reserve/myRreserve')
			},
			certainBtn() {
				let that = this;
				if (that.jump_pay == 2) {
					that.showModal1 = false;
					if (that.palyInfo.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: that.palyInfo.appId,
							extraData: that.palyInfo.extraData
						});
					} else {
						uni.getProvider({
							service: 'payment',
							success(resp) {
								uni.requestPayment({
									provider: resp.provider[0],
									orderInfo: {
										sncode_id: that.sncode_id
									},
									timeStamp: that.palyInfo.timeStamp,
									nonceStr: that.palyInfo.nonceStr,
									package: that.palyInfo.package,
									signType: that.palyInfo.signType,
									paySign: that.palyInfo.paySign,
									success(res) {
										uni.showToast({
											title: '支付成功',
											mask: true,
											icon: 'none',
											success() {
												setTimeout(() => {
													uni.navigateBack({
														delta: 1
													})
												}, 800)
											}
										})

									},
									fail(err) {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}
						})
					}


				} else {
					uni.navigateTo({
						url: '/pages/reserve/myRreserve'
					})
				}
			},

			toStation() {
				let that = this;
				that.showSuccess = false;
				that.toUrl('/moneyPage/station/index')
			},
			openFile(url) {
				let that = this;
				// #ifdef H5
				window.location.href = that.baseUrl + url
				// #endif
				// #ifndef H5
				uni.downloadFile({
					url: that.baseUrl + url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						})
					}
				})
				// #endif
			},
			copy_text: function(copyData) {
				uni.setClipboardData({
					data: copyData,
					success: function() {
						uni.showToast({
							title: "复制成功！",
							icon: "success"
						})
					}
				});
			},
			getList() {
				this.list.forEach((item, index) => {
					this.getFormStr(item.order_id)
				})
			},
			btnConfirm(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.time = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm1(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.today = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm2(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnCancel(e) {
				console.log(e)
			},
			dateChange(e) {
				var DATE = e.target.value;
				this.orderData[index_f].data[index].config_content = DATE;
			},
			timeChange(e) {
				var index = e.target.dataset.index;
				var index_f = e.target.dataset.indexf;
				var TIME = e.target.value;
				this.orderData[index_f].data[index].config_content = TIME;
			},
			showPicker: function(sx, index, index_f) { // 记录当前表单序列和当前表单项系列 
				this.shixian = sx;
				this.indexs = [index, index_f];
			},
			showPicker1: function(sx, index, index_f) {
				this.shixian1 = sx;
				this.indexs = [index, index_f];
			},
			quxiaobutton: function() {
				this.shixian = false;
			},
			quxiaobutton1: function() {
				this.shixian1 = false;
			},
			quedingbutton: function(y, m, d) {
				this.shixian = false;
				this.inputValue = y + "-" + m + "-" + d;
				this.year = y;
				this.month = m;
				this.day = d;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.inputValue;
			},
			quedingbutton1: function(h, m) {
				this.shixian1 = false;
				this.hour = h;
				this.minute = m;
				if (h < 9)
					h = '0' + h
				if (m < 9)
					m = '0' + m
				this.time = h + ":" + m;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.time;
			},
			bindDateChange: function(event) {
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = event.target.value;
			},
			// 三级联动选择
			showAddPicker(index, index_f) {
				this.shixian2 = true;
				this.indexs = [index, index_f];
			},
			onCancel() {
				this.shixian2 = false;
			},
			onConfirm(e) {
				this.shixian2 = false;
				var add = e.label.replace(/-/g, '');
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = add;
			},
			// 下拉框
			showSelect(index, index_f) { //下拉框显示
				this.orderData[index_f].data[index].showSelect_ = true;
				this.indexs = [index, index_f];
			},
			chooseSel(index, index_f, option) { //下拉框选择
				this.orderData[index_f].data[index].showSelect_ = false;
				if (option) {
					this.orderData[index_f].data[index].config_content = option;
				}
			},
			selectorChange(e) {
				var index_f = e.target.dataset.indexf;
				var index = e.target.dataset.index;
				var selector = e.target.value;
				this.orderData[index_f].data[index].config_content = this.orderData[index_f].data[index].options[selector];
			},
			// 复选框
			checkClick(index, index_f, index_check, checked, name) { // 复选框选择 2020.01.09 update
				var that = this;
				var chklist = that.orderData[index_f].data[index];
				if (chklist.config_content && typeof chklist.config_content != 'object') {
					chklist.config_content = chklist.config_content.split(',')
				}
				if (chklist.config_content == '') {
					chklist.config_content = []
				}
				that.orderData[index_f].data[index].checkList[index_check].checked = !checked;
				if (checked) { // 取消选择
					chklist.config_content.forEach((chk, index_c) => {
						if (chk == name) {
							that.orderData[index_f].data[index].config_content.splice(index_c, 1)
						}
					})
				} else { // 新增选择
					that.orderData[index_f].data[index].config_content.splice(index_check, 0, name);
				}
			},
			//单选
			checkClick1(index, index_f, index_check, name) { //单选
				this.orderData[index_f].data[index].config_content = name;
			},
			// 文本域
			areaBlur(e, index, index_f) {
				this.orderData[index_f].data[index].config_content = e.detail.value;
			},
			// 上传图片
			//选择图片
			selectImage(index, index_f, limit) {
				var that = this;
				uni.chooseImage({
					count: limit,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.showLoading({
							title: '图片上传中'
						})
						that.loadingNow = true; // 图片正在上传
						res.tempFilePaths.forEach((tempFilePath, tempIndex) => {
							that.$common.uploadFile('/zzjApp/uploade?bid=' + that.bid, tempFilePath)
								.then(res2 => {
									var data = res2;
									if (typeof res2 == 'string') {
										data = JSON.parse(data)
									}
									if (data.errcode == 100) {
										var imgItem;
										imgItem = data.url;
										imgItem = imgItem.substring(22, imgItem.length);
										if (that.orderData[index_f].data[index].imgs.length <
											limit) {
											that.orderData[index_f].data[index].imgs.push(imgItem)
										}
										if (that.orderData[index_f].data[index].imgs.length >=
											limit) {
											that.orderData[index_f].data[index].imgEn = false;
										}
										that.orderData = [].concat(that.orderData)
									} else {
										uni.showToast({
											icon: 'none',
											title: data.msg + '!',
											duration: 2000
										})
									}
									uni.hideLoading();
									that.loadingNow = false;
								})
						})
					}
				})
			},
			del(index, index_f, i) { // 删除图片
				this.orderData[index_f].data[index].imgs.splice(i, 1);

				this.orderData[index_f].data[index].imgEn = true
			},
			getFormStr(ordId) { // 获取自定义表单结构
				let that = this;
				that.$http.get({
					url: '/SRA_CustomerForm/customForm',
					data: {
						VeriCode: this.bid,
						ordId: ordId,
					}
				}).then(res => {
					if (res.code == 100) {
						var obj = {};

						if (res.data.config) {
							obj.data = res.data.config;
							obj.data.forEach((item, index) => {
								if (item.config_type == 1) { // 文本框
									if (item.config_content) {
										item.place = item.config_content;
										item.config_content = '';
									}
								}
								if (item.config_type == 2) { // 下拉框
									item.showSelect_ = false;
									item.options = item.config_content.split('|');
									item.config_content = ''
								}
								if (item.config_type == 6) { // 选择地址
									item.pickered = item.config_content ? item.config_content : '请选择区县';
									item.config_content = '';
								}
								if (item.config_type == 7 && !item.config_content) { // 选择时间
									item.config_content = that.time;
								}
								if (item.config_type == 3) { // 选择日期
									// item.config_content = that.inputValue;
									item.config_pla = '请选择'
									if (item.config_content) {
										item.config_pla = item.config_content
										item.config_content = ''
									}

								}
								if (item.config_type == 4 && item.config_content) { // 下拉框
									item.plac = item.config_content;
									item.config_content = '';
								}
								if (item.config_type == 8) { // 上传图片
									item.config_content = '';
									item.imgs = [];
									item.imgEn = true;
									item.limit = item.limit ? parseInt(item.limit) : 1
								}
								if (item.config_type == 5 && item.config_content) { // 复选框
									item.checkList = item.config_content.split('|');
									item.checkList.forEach((check, index_) => {
										var check_ = {
											checked: false,
											name: check
										}
										item.config_content = [];
										item.checkList[index_] = check_;
									})
								}
								if (item.config_type == 9 && item.config_content) { // 单选框
									item.checkList = item.config_content.split('|');
									// item.config_content = item.checkList[0];
								}
							})
						}
						var userInfo = res.data.userInfo;
						if (userInfo) {
							obj.data[0].config_content = userInfo.v_name
							obj.data[1].config_content = userInfo.v_tel
						}
						obj.station = res.data.station
						if (res.data.ordInfo.order_content) {
							res.data.ordInfo.order_content = that.$common.richTxt(res.data.ordInfo.order_content)
								.html
						}
						obj.info = res.data.ordInfo;
						if (res.data.ordInfo.order_name) {
							that.$emit('title', res.data.ordInfo.order_name)
						}
						if (res.data.ordInfo.imgs) {
							obj.info.imgs = obj.info.imgs.split(',')
						}
						obj.info.verCode = '';
						// obj.info.wrongTxt = '';
						obj.info.btnTxt = '发送验证码';
						obj.info.btnDisabled = false;
						that.orderData.push(obj);
						if (that.barTitle == 1) {
							uni.setNavigationBarTitle({
								title: obj.info.order_name ? obj.info.order_name : '信息提交'
							})
						}
						that.v++;
					} else {
						that.noData = true
						that.msg = res.data
					}
				})
			},
			verifCode2: function(index, orderId) { // 发送验证码
				let that = this;
				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				if (phoneNumber == "") {
					uni.showToast({
						title: '联系电话不能为空！',
						icon: 'none'
					})
					return false;
				}
				if (!phoneReg.test(phoneNumber) && phoneNumber != "") {
					uni.showToast({
						title: '手机号输入有误！',
						icon: 'none'
					})
					return false;
				}
				if (that.orderData[index].info.btnDisabled)
					return
				that.$http.post({
					url: '/SRA_CustomerForm/verification_code',
					data: {
						ordId: orderId,
						phone: phoneNumber,
					}
				}).then(res => {
					if (res.code == 1000) { // 提交成功
						var cutdown = 60;
						timer = setInterval(function() {
							if (cutdown > 0) {
								cutdown--;
								that.orderData[index].info.btnTxt = "重新发送(" + cutdown + ")";
								that.orderData[index].info.btnDisabled = true;
							} else {
								clearInterval(timer);
								that.orderData[index].info.btnTxt = "发送验证码";
								that.orderData[index].info.btnDisabled = false;
							}
						}, 1000)
					}
					if (res.code == 1001) {
						uni.showToast({
							title: res.cont,
							icon: 'none'
						})
					}
				})
			},


			reserveNow: function(index, orderId) { // 自定义表单提交
				let that = this;

				if (!this.vid) return this.toUrl(`/userPage/login/binding`);
				if (that.loadingNow) return; // 图片正在上传

				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				if (!phoneReg.test(phoneNumber) && phoneNumber != "") {
					// that.orderData[index].info.wrongFlag = true;
					// that.orderData[index].info.wrongTxt = '手机号输入有误！';
					uni.showToast({
						title: '手机号输入有误！',
						icon: 'none'
					})
					return false;
				}
				var tokend = this.bid;
				var code = that.orderData[index].info.verCode;
				var params = {
					'VeriCode': tokend,
					'ordId': orderId,
					'jsCode': this.vid,
					'verification': code
				}
				let temp = that.orderData[index].data
				for (var index1 = 0; index1 < temp.length; index1++) {
					var item = temp[index1];
					if (typeof item.config_content == 'object') { // 复选
						item.config_content = item.config_content.join(",");
					}
					if (item.config_type == 8) { // 上传图片
						item.config_content = item.imgs.join(",");
					}
					if ((item.config_must == 1 || item.config_name == '用户姓名' || item.config_name == '联系电话') && item
						.config_content == '') {
						uni.showToast({
							title: item.config_name + '不能为空！',
							icon: 'none'
						})
						return false;
					}
					var name = 'name' + index1;
					params[name] = item.config_content;
				}
				uni.showLoading({
					title: '请稍等 ~'
				})
				that.$http.post({
					url: '/zzj_singleSaleApi/addFrom',
					data: params
				}).then(res => {

					if (res.code == 100) { // 提交成功
						that.sncode_id = res.sncode_id;
						that.jump_pay = res.jump_pay;
						that.orderData[index].data.forEach((item, index2) => {
							that.orderData[index].data[index2].config_content = '';
							that.orderData[index].data[index2].imgs = [];
							that.orderData[index].info.verCode = '';
							that.orderData[index].info.btnTxt = "发送验证码";
							that.orderData[index].info.btnDisabled = true;
						})
						clearInterval(timer);
						if (orderId == '2147') { // 申请站长成功
							that.showSuccess = true
						} else {
							if (res.jump_pay == 0) {
								uni.hideLoading()
								that.modelTitle = res.data
								that.btn1 = '确定';
								that.btn2 = '前往查看';
								that.success_img = res.success_img
								if (!that.success_img) that.showModal1 = true
							} else if (res.jump_pay == 1) {
								uni.hideLoading()
								window.open(res.jump_url)
							} else if (res.jump_pay == 2) {
								that.btn1 = '暂不支付';
								that.btn2 = '立即支付';
								that.getPlayinfo();
							}

						}
					}
					if (res.code == 101) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
						// that.orderData[index].info.wrongTxt = res.data;
					}
				})
			},



			//  获取支付信息
			getPlayinfo() {
				let that = this;
				that.$http.post({
					url: '/accountPay/getSncodePay',
					data: {
						sncode_id: that.sncode_id,
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == '100') {
						that.palyInfo = res.data;
						that.showModal1 = true
					} else {
						uni.showToast({
							title: res.msg,
							mask: true,
							icon: 'none'
						})
					}
				})
			},





			previewImage(i, imgArry) {
				let that = this;
				if (imgArry) {
					let arr = [];
					for (let i in imgArry) {
						arr.push(that.$imgUrls(imgArry[i]))
					}
					uni.previewImage({
						current: i,
						urls: arr,
						indicator: "number",
						loop: true
					})
				}
			},


		},
		computed: {
			...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'vid', 'share', 'bid']),
		},
	}
</script>
<style scoped lang="scss">
	.nowBtn {
		height: 88rpx;
		border-radius: 44rpx;
		-webkit-border-radius: 44rpx;
		overflow: hidden;
	}

	.nowLeft {
		width: 270rpx;
	}

	.nowRigth {
		width: 360rpx;
	}

	.my-form {
		.orderInfo {
			background: white;

			.topMsg {
				padding: 0 30rpx;

				.infoContent {
					padding: 10upx 0 30upx;

					.infoName {
						font-size: 36upx;
						color: #333;
						font-weight: bold;
						line-height: 90upx;
						border-bottom: 1px solid #eeeeeeee;
					}

					.info_item {
						font-size: 24upx;
						margin: 10upx 0;
					}

					.info_s {
						margin: 20upx 0 10upx;
						padding-top: 10upx;
						border-top: 1px solid #eeeeee;
					}
				}
			}

			table {
				width: 100% !important;
			}
		}

		// 下载
		.dowload_file_box {
			padding: 20rpx 24rpx;

			.dowload_file {
				margin-right: 20rpx;

				text {
					display: inline-block;
					color: white;
					padding: 0 28rpx;
					line-height: 54rpx;
					text-decoration: underline;
					border-radius: 40rpx;
				}
			}
		}


		// 图集
		.photoes {
			overflow-x: auto;
			white-space: nowrap;
			margin-top: 20rpx;
			padding: 0 $uni-page-space;

			.img_1 {
				width: 100%;
				height: 300rpx;
				border-radius: 8rpx;
			}

			.img_2 {
				width: calc(25% - 8rpx);
				margin-right: 10rpx;
				height: calc(25vw - 10rpx);
				border-radius: 8rpx;
				display: inline-block;
			}
		}

		// 申请站长成功
		.success-img-box {
			min-height: 100vh;
			overflow-y: auto;
			background-color: #FFFFFF;

			.success-img {
				width: 100vw;
			}
		}

		/* 预约试听 */
		.reserve-box {
			padding: 30rpx;

			.reserve {
				border-radius: 16upx;
				padding: 30upx 30upx 20upx;
				box-sizing: border-box;
				background: white;
				box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.12);

				.reserve-title {
					color: #333333;
					font-size: 36rpx;
					position: relative;
					text-align: center;
				}

				.reserve-title:before {
					position: absolute;
					content: "";
					width: 40upx;
					height: 2px;
					top: calc(100% + 10px);
					left: 50%;
					transform: translateX(-50%);
					background: #333333;
				}

				.form {
					margin-top: 68upx;

					.Required {
						color: #FE1112 !important;
						font-size: 30upx;
						margin-right: 4upx;
						padding: 0;
						display: inline-block;
						vertical-align: middle;
						background: none;
					}

					.isKey {
						color: #000000;
					}

					>view {
						margin-bottom: 30rpx;
					}

					input {
						height: 100%;
						padding-left: 10upx;
						font-size: 26rpx;
						color: #333333;
					}

					.icon-xiasanjiaoxing {
						color: #999999;
						font-size: 28rpx;
					}

					// 1、单行文本框
					.text_input {
						background: #F2F2F2;
						border-radius: 10rpx;
						line-height: 88rpx;
						height: 88rpx;
						display: flex;
						padding: 0 20rpx;

						.form-ipt {
							border: none;
							outline: none;
							flex: 1;
							background: none;
							font-size: 24rpx;
						}

						.pla {
							color: #999999;
						}
					}

					// 3、验证码
					.Veri_Code {
						background: white;
						height: 88rpx;
						display: flex;

						.inputBox {
							background: #F2F2F2;
							border-radius: 10rpx;
							padding-left: 20rpx;
							align-items: center;

						}

						/* 发送验证码 */
						.sendCode {
							margin-left: 20rpx;
							border-radius: 10rpx;
							outline: none;
							box-sizing: border-box;
							color: white;
							line-height: 88rpx;
							font-size: 28rpx;
							width: 250rpx
						}
					}

					// 2、选择日期  4、选择时间  5、选择地址 6、下拉框 11、选择时间 (可配置类型)
					.drop_select {
						border: 1px solid #D8D8D8;
						height: 88rpx;
						display: flex;
						border-radius: 10rpx;

						.picker {
							width: 100%;
							height: 88rpx;
							display: flex;
							align-items: center;
							padding: 0 20rpx;

							.flex {
								color: #999999;
							}

							.isKey {
								color: #000000;
							}
						}
					}

					// 7、复选框
					.mulitSelect {
						display: flex;

						.checkList {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: -14rpx;

							.checkItem {
								margin-right: 20rpx;
								margin-bottom: 14rpx;
								display: flex;
								align-items: center;

								.checkIcon {
									border-radius: 6rpx;
									width: 30rpx;
									height: 30rpx;
									display: flex;
									align-items: center;

									.icon-xuanzhong {
										font-size: 26rpx;
									}
								}

								.name {
									color: #666666;
									margin-left: 8rpx;
								}
							}
						}
					}

					// 8、单选框
					.singleSelect {
						display: flex;

						.checkList {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: -14rpx;

							.checkItem {
								margin-right: 20rpx;
								margin-bottom: 14rpx;
								display: flex;
								align-items: center;

								.checkIcon_ {
									border-radius: 50%;
									width: 32upx;
									height: 32upx;
									display: inline-block;
									box-sizing: border-box;
									border: 1px solid #D8D8D8;
									position: relative;

									text {
										width: 16upx;
										height: 16upx;
										border-radius: 50%;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
									}

									.grayBg {
										background: #D8D8D8;
									}
								}

								.name {
									color: #666666;
									margin-left: 6rpx
								}
							}
						}
					}

					// 9、上传图片
					.uploadImg {
						.phone-box {
							flex-wrap: wrap;
							margin-top: 20rpx;
							margin-bottom: -20rpx;

							.upBox {
								width: 196upx;
								height: 196upx;
								border-radius: 10rpx;
								position: relative;
								// border:1rpx solid #dcdada;;

								&:nth-of-type(3n-1) {
									margin: 0 20rpx;
								}

								margin-bottom: 20rpx;

								.upIcon {
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
									user-select: none;
									-webkit-user-drag: none;
								}

								.delImg {
									position: absolute;
									z-index: 22;
									width: 32rpx;
									height: 32rpx;
									top: -16rpx;
									right: -16rpx;
									border-radius: 50%;

									image {
										width: 100%;
										height: 100%;
									}
								}
							}

						}
					}

					// 10、文本域
					.areaBox {
						.textArea {
							background-color: #f5f5f5;
							padding: 20rpx;
							font-size: 24rpx;
							height: 196rpx;
							z-index: 0 !important;
							color: rgb(51, 51, 51);
							border-radius: 10rpx;
							margin-top: 10rpx;
						}
					}

					.wrong {
						color: #FE1112;
						padding-left: 16rpx;
						line-height: 40upx;
						margin-bottom: 20upx;
					}

					/* 立即预约 */
					.reserveNow {
						font-size: 32upx;
						color: white;
						height: 88upx;
						line-height: 88upx;
						border-radius: 44upx;
						border: none;
						outline: none;
						position: relative;
						background-color: #d8d8d8;
					}
				}

			}
		}


	}
</style>